<template>
  <a-list item-layout="horizontal"
          :data-source="planList">
    <template v-slot:renderItem="{ item }">
      <a-list-item>
        <a-list-item-meta :description="`耗时${item.time}h`">
          <template v-slot:title>
            <div>{{item.content}}</div>
            <span>{{formatDate(item.date)}}</span>
          </template>
        </a-list-item-meta>
        <template v-slot:actions>
          <a @click="deletePlan(item)">完成</a>
        </template>
      </a-list-item>
    </template>
  </a-list>
</template>
<script>
  import { reactive, toRefs, ref, onMounted, createVNode } from 'vue'
  import { message, Modal } from 'ant-design-vue'
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import moment from 'moment';
  import { useStore } from 'vuex'
  import * as types from '../../store/action'
  export default {
    setup (props, context) {
      const store = useStore()
      // const state = reactive({
      //   planList: store.state.planList, // planList 取的是store中默认值
      // })
      onMounted(() => {
        store.dispatch(types.GET_PLAN_LIST)
      })
      const formatDate = (date) => {
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
      }
      const deletePlan = (item) => {
        Modal.confirm({
          title: '确定要完成吗?',
          icon: createVNode(ExclamationCircleOutlined),
          content: createVNode('div', { style: 'color:red;' }, '完成将删除此内容'),
          onOk: async () => {
            await store.dispatch(types.DELETE_PLAN, item)
            message.success('操作成功')
            await store.dispatch(types.GET_PLAN_LIST)
          }
        })
      }
      return {
        ...toRefs(store.state),
        formatDate,
        deletePlan
      }
    }
  }
</script>